import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _slice from "lodash/slice";
import _map from "lodash/map";
import _isFunction from "lodash/isFunction";
import _concat from "lodash/concat";
import _cloneDeep from "lodash/cloneDeep";

/**
 * index.js
 * @date 2018/10/9
 */
import React from 'react';
import Col from "./Col";
import styles from "../../index.less?modules";
import DrawDragField from "../../Drag/DrawDragField";
import { emptyFieldType, fieldNameProp } from "../../../config";
import DrawDragComponent from "../../Drag/DrawDragComponent";

var DynamicToolbarRender = /*#__PURE__*/function (_React$Component) {
  _inherits(DynamicToolbarRender, _React$Component);

  var _super = _createSuper(DynamicToolbarRender);

  function DynamicToolbarRender(props) {
    var _this;

    _classCallCheck(this, DynamicToolbarRender);

    _this = _super.call(this, props);
    _this.state = {};
    _this.wrapperFieldComponent = _this.wrapperFieldComponent.bind(_assertThisInitialized(_this));
    _this.handleAddField = _this.handleAddField.bind(_assertThisInitialized(_this));
    _this.handleRemoveField = _this.handleRemoveField.bind(_assertThisInitialized(_this));
    _this.handleSwapField = _this.handleSwapField.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(DynamicToolbarRender, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          component = _this$props.component,
          currentEditComponent = _this$props.currentEditComponent,
          currentEditField = _this$props.currentEditField,
          onAddField = _this$props.onAddField,
          onActiveField = _this$props.onActiveField,
          onSwapField = _this$props.onSwapField,
          onRemoveField = _this$props.onRemoveField,
          onActiveComponent = _this$props.onActiveComponent;
      return /*#__PURE__*/React.createElement("div", {
        className: styles['dynamic-toolbar']
      }, /*#__PURE__*/React.createElement(DrawDragComponent, {
        component: component,
        onAddField: onAddField,
        onRemoveField: onRemoveField,
        onActiveComponent: onActiveComponent,
        currentEditComponent: currentEditComponent,
        currentEditField: currentEditField
      }, _map(component.fields, function (field, index) {
        return /*#__PURE__*/React.createElement(Col, {
          wrapperFieldComponent: _this2.wrapperFieldComponent,
          key: index,
          pComponent: component,
          currentEditField: currentEditField,
          component: field,
          colOptions: {
            index: index
          },
          onRemoveField: _this2.handleRemoveField,
          onActiveField: onActiveField,
          onSwapField: onSwapField
        });
      })));
    }
  }, {
    key: "handleAddField",
    value: function handleAddField(component, dragField, dropField, dragFieldOptions, dropFieldOptions) {
      var _this$props2 = this.props,
          onUpdateComponent = _this$props2.onUpdateComponent,
          onActiveField = _this$props2.onActiveField;

      if (dropField.componentType !== emptyFieldType) {
        // TODO 只能在 空 的地方添加新的字段, 非空的也进不来, 因为有 canDrop
        return;
      }

      var newField = _cloneDeep(dragField); // 字段本身的属性


      newField[fieldNameProp] = 'defaultCode'; // 删除 field 的其他属性

      delete newField.className;
      delete newField.name; // eslint-disable-next-line

      component.fields[dropFieldOptions.index] = newField; // TODO 更新 PageDesigner 中的数据

      if (_isFunction(onUpdateComponent)) {
        onUpdateComponent(component);
      }

      if (_isFunction(onActiveField)) {
        onActiveField(component, newField);
      }
    }
  }, {
    key: "handleSwapField",
    value: function handleSwapField(component, dragField, dropField, dragFieldOptions, dropFieldOptions) {
      var _this$props3 = this.props,
          onUpdateComponent = _this$props3.onUpdateComponent,
          onActiveField = _this$props3.onActiveField; // eslint-disable-next-line no-param-reassign

      component.fields[dragFieldOptions.index] = dropField; // eslint-disable-next-line no-param-reassign

      component.fields[dropFieldOptions.index] = dragField; // 保证数据一定正确
      // TODO 更新 PageDesigner 中的数据

      if (_isFunction(onUpdateComponent)) {
        onUpdateComponent(component);
      }

      if (_isFunction(onActiveField)) {
        onActiveField(component, dragField);
      }
    }
  }, {
    key: "handleRemoveField",
    value: function handleRemoveField(component, field, fieldOptions) {
      var _this$props4 = this.props,
          onUpdateComponent = _this$props4.onUpdateComponent,
          onActiveComponent = _this$props4.onActiveComponent; // 保证数据一定正确
      // eslint-disable-next-line no-param-reassign

      component.fields = _concat([], _slice(component.fields, 0, fieldOptions.index), _slice(component.fields, fieldOptions.index + 1)); // TODO 更新 PageDesigner 中的数据

      if (_isFunction(onUpdateComponent)) {
        onUpdateComponent(component);
      }

      if (_isFunction(onActiveComponent)) {
        onActiveComponent(component);
      }
    }
  }, {
    key: "wrapperFieldComponent",
    value: function wrapperFieldComponent(fieldElement, field, fieldOptions) {
      var _this$props5 = this.props,
          component = _this$props5.component,
          onActiveField = _this$props5.onActiveField,
          currentEditField = _this$props5.currentEditField;
      return /*#__PURE__*/React.createElement(DrawDragField, {
        pComponent: component,
        component: field,
        onSwapField: this.handleSwapField,
        onRemoveField: this.handleRemoveField,
        onAddField: this.handleAddField,
        onActiveField: onActiveField,
        fieldOptions: fieldOptions,
        currentEditField: currentEditField
      }, fieldElement);
    }
  }]);

  return DynamicToolbarRender;
}(React.Component);

export { DynamicToolbarRender as default };